Star Calculator

12th鐵人賽

Rocketgirl

團隊仙人掌技術村

2020-10-12 23:50:50

810 瀏覽

分享至

JS雜食-06--小實作-1: Star Calculator

tags: `ithome`

用HTML+純JS試作一表單，規格：

兩個輸入框
一個提交按鈕
點擊按鈕時顯示：輸入的兩個數字總和

參考資料1：MDN — the Mozilla Developer Network

前置作業

基本HTML, CSS知識
新增一資料夾至少包含以下三種檔案：index.html、style.css、main.js 到對應資料夾結構中，我想放到背景的照片也放入images資料夾中

images
|--nasa.jpg
scripts
|--main.js
styles
|--style.css
index.html

撰寫HTML

數字需要透過輸入框寫入，而輸入框需要包覆在<form>tag之中；依序在<body>中填入<form>、2個<input>後，給予對應#id以便JS操作，這邊的<form> id命名為starCalculator，而2個<input>框id則分別命名為starNumber1、starNumber2
引入JS檔案，放在</body>前，以避免HTML畫面還沒讀完JS就先運作，我們需要的順序總是HTML+CSS > JS

<body>
  <form id="starCalculator">
    <p>
      <input type="number" placeholder="input a random number" id="starNumber1"> + <input type="number" placeholder="input a random number" id="starNumber2">
    </p>
    <input type="submit" id="submit">
  </form>
  
  <script src="scripts/main.js"></script>
</body>